
import QRCode from 'qrcode'
import axios from '@/utils/request'
export default {
  Counter: {
    list: {
      list_filter: {
        'store.id': () => {
          return axios
            .get(`/manage/stores`)
            .then(res =>
              Object.assign({ __label: '门店' },
                ...res.data.map(v => { return { [v.id]: v.name } })))
        }
      },
      query: {
        '@order': 'entity.listOrder|ASC'
      },
      list_display: [
        'id',
        'store',
        'name',
        {
          property: 'image', label: '二维码',
          component: {
            props: ['record'],
            data() {
              return {
                show: false,
                loading: false,
                codeUrl: '',
                name: ''
              }
            },
            methods: {
              showCode(name) {
                if (!name) {
                  this.$message.error('该台面没有名称！')
                  return
                }
                this.codeUrl = ''
                this.name = name
                this.loading = true
                QRCode.toDataURL(`http://pub.nightkper.com/h5-2/pages/index/products?id=${this.record.id}`)
                  .then((url) => {
                    console.log('QRCode', url)
                    this.codeUrl = url
                    this.show = true
                  })
                  .catch((err) => {
                    this.$message.error(err)
                    this.$router.go(-1)
                  })
                  .finally(() => { this.loading = false })
              }
            },
            render(h) {
              return <div>
                <el-button nativeOnClick={ () => { this.showCode(this.record.name) } }
                  slot='reference' size='small' loading={this.loading}>
                          二维码
                </el-button>

                <el-dialog
                  title='二维码'
                  visible={this.show}
                  width='40%'
                  onClose={() => { this.show = false }}
                >
                  <div style='text-align: center; font-size:18px'>{this.name}</div>
                  <div style='padding: 10px; text-align: center'>
                    <el-image style='width: 400px; height: 400px' src={this.codeUrl} />
                  </div>
                  <span slot='footer' class='dialog-footer'>
                    <a style='padding-right:20px;font-size:18px;color:blue' href={this.codeUrl} download={`${this.name}.png`}>点击下载</a>
                  </span>
                </el-dialog>
              </div>
            }
          }
        },
        {
          property: 'disableDeposit',
          editable: true,
          label: '禁止入金'
        },
        'pool',
        { property: 'listOrder', editable: true },
        { property: 'enabled', editable: true }
      ]
    },
    form: {
      fields: [
        'store',
        'name',
        { property: 'enabled', default_value: true },
        'listOrder'
      ]
    }
  }
}

